<template>
  <div class="playlist">
    <div class="ww">
        <div class="rcmd-h">
            <p>{{ cat }}</p>
            <div class="type-list">
              <div class="type-item" v-for="(item, index) in songType" :key="item.id">
                <a href="javascript:;" @click="toPlaylist(item.id, item.name)">{{ item.name }}</a>
                <span class="line" v-if="index+1 !== songType.length">|</span>
              </div>
            </div>
            <div class="card-r">
              <router-link to="javascript:;">热门</router-link>
              <i></i>
            </div>
        </div>
        <MusicList :recommendData="recommendSheet" :rowNum="5" :titleWrap="true"></MusicList>
    </div>
  </div>
</template>

<script>
import { reqRecommendSheet, reqSongTypeList } from '@/api/index'
import MusicList from '@/components/MusicList'
export default {
  components:{ MusicList },
  data() {
    return {
      songType: [],
      cat: this.$route.query.cat || '全部',
      catId: this.$route.query.catId || '',
      recommendSheet: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      reqSongTypeList().then(res => {
        res.rows.forEach(item => {
          item.name = item.name.slice(0, -4)
          this.songType.push(item)
        })
      })

      reqRecommendSheet().then(res => {
        if(this.catId) {
          res.rows.forEach((item, index) => {
            if(item.songList.id == this.catId) {
              let obj = {
                id: item.id,
                songListId: item.songList.id,
                // imgUrl: `../../images/songSheet0${ index + 1 }.jpg`,
                imgIdx: index + 1,
                isBoutique: index % 3 === 0 ? true : false,
                synopsis: ( index + 8 ) * 8888,
                isRadioProgram: false,
                name: item.songList.name
              }
              this.recommendSheet.push(obj)
            }
          })
        } else {
          res.rows.forEach((item, index) => {
            let obj = {
              id: item.id,
              songListId: item.songList.id,
              // imgUrl: `../../images/songSheet0${ index + 1 }.jpg`,
              imgIdx: index + 1,
              isBoutique: index % 3 === 0 ? true : false,
              synopsis: ( index + 8 ) * 8888,
              isRadioProgram: false,
              name: item.songList.name
            }
            this.recommendSheet.push(obj)
          })
        }
      })

      // reqSongTypeById({id: this.catId}).then(res => {
      //   console.log(res)
      // })
    },
    toPlaylist(catId, cat) {
      this.$router.push({
        path: '/playlist',
        query: { catId, cat }
      })
      this.$router.go(0)
    }
  }
}
</script>
<style lang="less" scoped>
  .ww {
    padding: 40px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .playlist {
    .rcmd-h {
      margin-top: 20px;
      height: 33px;
      padding-bottom: 5px;
      border-bottom: 2px solid #C10D0C;
      p {
        float: left;
        font-size: 20px;
        font-weight: normal;
        min-width: 60px;
        line-height: 28px;
        color: #333;
      }
      .type-list {
        float: left;
        margin: 7px 0 0 20px;
        .type-item {
          display: inline-block;
          a { 
            color: #666;
            cursor: pointer;
            &:hover {
              color: #666 !important;
              text-decoration: underline !important;
            }
          }
          span {
            margin: 0 10px;
            color: #ccc;
          }
        }
        .more {
          float: right;
        }
      }
      .card-r {
        float: right;
        height: 29px;
        border-radius: 3px;
        background: url(../../assets/images/button.png) no-repeat 0 0;
        a {
          display: inline-block;
          width: 46px;
          height: 29px;
          line-height: 29px;
          text-align: center;
          font-weight: normal;
          color: #fff;
          &:hover {
            text-decoration: underline;
            color: #fff !important;
          }
        }
      }
    }
  }
</style>